<template>
  <div class="tab">
     <h1>tab切换</h1>
    <div class="img">
      <img :src="data.imgs[data.num]" alt="">
      <i class="iconfont icon-xiangzuo" @click="left"></i>
      <i class="iconfont icon-xiangyou" @click="right"></i>
    </div>
    <ul>
      <li v-for=" (item,i) in data.imgs" :key="item"><img :src="item" alt="" >
        <div :class="i == data.num ? 'active' : ''" @click="tap(i)"></div>
      </li>
    </ul>
    
  </div>
</template>
<script setup>
import { reactive } from "vue";
const data = reactive({
  imgs:[
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202101%2F16%2F20210116175751_d09fc.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681219542&t=d8c122d59456c41c27039fa2d52c1eae',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F12%2F20190212200157_sgkvo.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681219463&t=13c20ed8425a4d0d03e8d45a8d9a7d4b',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F07%2F20200407114914_bekyp.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681219463&t=8f2dffa10cd2d53c699aec4972818018',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F13%2F20200213164201_HEBRf.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681219542&t=ade6e266732c156e6bb6e3d6e5f3c4aa',
    ],
  num:0
})
const tap = (i) =>{
  data.num = i
}
const left = () =>{
 data.num --
  if(data.num == -1)  data.num = 3
}
const right = () =>{
   data.num ++
  if(data.num == 4)  data.num = 0
  
}
</script>
<style scoped>
.tab {
  width: 600px;
  margin: auto;
}
.img {
  width: 600px;
  height: 300px;
  position: relative;
}
.img >img {
  width: 100%;
  height: 100%;
}
ul {
  width: 600px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
li {
    list-style: none;
  width: 150px;
  height: 100%;
  position: relative;
}
li img {
  width: 100%;
  height: 100%;
}
li > div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
li > .active {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #00000000;
}
.icon-xiangzuo {
  position: absolute!important;
  left: 0 !important;
  color: black;
  top: 150px !important;
  font-size: 50px;
}
.icon-xiangyou {
  position: absolute!important;
  right: 0 !important;
  color: black  !important;
  top: 150px !important;
  font-size: 50px;
}
</style>
